<template>
	<view>
        <view class="carousel-box">
			<view class='swiper'>
				<swiper class="swiper-c" :indicator-dots="swiper.indicatorDots" :autoplay="swiper.autoplay" :interval="swiper.interval"
				 :duration="swiper.duration">
					 <swiper-item v-for="(item, index) in loupanPhoto" :key="index" @click="clickImg(item)">
						<img :src="item" alt="">
					</swiper-item>
				</swiper>
			</view>
        </view>

		<!-- 详情信息 -->
		<view>
			<view class="row2">
			<!--基本信息-->
			
			    <view class="mod mod-base mod-tit">
			        <view class="bd">
			            <view class="name-price-wrap">
			                <view class="name">
			                    <h3>
			                        {{info.title}}
			                        <!--安全购-->
			                    </h3>
			                    <view class="tag-aqg">
			                            <img src="@/static/img00/safety.png" alt="安全购" />
			                    </view>
			                </view>
			
			                <view class="lb-area new-lb-area">
			                    <span class="new-lbs new-lbs-yt" v-for="(item,index) in info.type_arr " :key="index" >{{ item }}</span>
			                    
								<span class="new-lbs new-lbs-in"  v-for="(item2,index2) in info.tag_name_arr ">
			                        {{ item2 }}
			                    </span>
			
			                </view>
			            </view>
			        </view>
			    </view>
			
			    <view class="mod mod-base mod-base1">
			        <view class="bd">
			            <ul class="base-info">
			                <li class="price-current">
			                    <view class="price-wrap">参考单价：<span>{{info.pagePrice}}</span></view>
			                </li>
			                <li class="price-history">参考总价：<span>{{info.pageTotal}}</span></li>
			
			                <li>建筑面积：<span>{{info.area}}</span></li>
			
			                <li>开盘时间：<span>{{info.page_opening_date}}</span></li>
			
			                <li class="address">
			                    <view class="th">楼盘地址：</view>
			                    <view class="td">
			                        <span class="house-zone"> {{info.qu}}</span>{{info.address}}
			                    </view>
			                </li>
			            </ul>
			
			            <view class="link-more" @click="details(loupan_id)">
			                <a>查看楼盘详细信息</a>
			            </view>
			
			        <!--榜单展示-->
						<view class="ranking-entrance" @click="fiery()">
							<view class="pic">
								<img src="@/static/img00/huo.png" alt="" />
							</view>

							<view class="right">
								<img src="@/static/img00/icon_right.png" alt="">
							</view>
		
							 <p>余杭区热销楼盘榜</p>
		
						</view>
							
			            <ul class="link-area" style="padding: 0;background: #fff;" >
			                <li class="left" @click="open({
								type:'changePrice',
								msg:'获取变价通知',
								title:'订阅价格变动通知',
								text:'价格变动这么快？！订阅价格变动通知，涨价降价我们将第一时间通知您，帮您找准买房时机！'
							})">
			                    <img  src="@/static/img00/ic_ price.png" alt=""> 
								<span >获取变价通知</span>
			                </li>
							
							
						
			                <li class="right" @click="open({
								type:'subLoupan',
								msg:'获取开盘通知',
								title:'订阅楼盘开盘通知',
								text:'楼盘总是悄无声息的开盘？一键订阅，让您抢占买房先机！'
							})">
			                    <img  src="@/static/img00/notice.png" alt="">
			                    <span >获取开盘通知</span>
			                </li>
			            </ul>
			
			        </view>
			    </view>
			</view>
		</view>

		<!-- 房象优惠 -->
		<view>
			<!-- <discounts :jdata="youhui"></discounts> -->
			<view class="row">
			    <view class="mod mod-discount">
			        <view class="hd clearfix1">
			            <h2>房象优惠</h2>
			        </view>
			        <view class="bd">
			            <ul class="discount-area">
							<li v-for="(item,index) in youhui" :key="index" class="click_open_layer" @click="open({
								type:'coupon_car',
								msg:item.name,
								title:item.name,
								text:item.desc
							})">
			                    
								<view href="javascript:void(0)" class="btn-know common-call">
			                        <view class="discounts-cont2">
			                            <!-- <view style="float: left;">
			                                <p class="name">{{item.name}}</p>
			                                <view class="wrapper mar">
			                                    <view class="inner">
			                                        <p class="txt">￥{{item.price}}</p>
			                                    </view>
			                                </view>
			                                <view class="wrapper">
			                                    <view class="inner">
			                                        <p class="txt2">{{item.start_time_page}} 至 {{item.end_time_page}} 使用</p>
			                                    </view>
			                                </view>
			                            </view> -->
			                            <view class="wrapper-right">
			                                <view>已抢</view>
			                                <view>{{item.rob}}</view>
			                            </view>
			                        </view>
			                    </view>
								<image :src="item.image"></image>
			                </li>
			
			            </ul>
			        </view>
			    </view>
			</view>

		</view>

		

		<!-- 户型 -->
		<view>
			<view class="row">
			  <view class="huxing-mod mod-house-type">
			
			        <view class="hd" style="margin-left:0;" @click="unit(loupan_id)">
			            <h2>户型({{all_huxing_num}})</h2>
			            <view class="more">
			                <img src="@/static/img00/icon_right.png" alt="">
			                查看全部
			            </view>
			        </view>
					
					<view v-for="(item, index) in huxing" :key="index" class="" >
					
						<view class="hu-house-type-list hu-card-list-box" @click="hux(item.id,loupan_id)">
							<view class="hu-house-type-item">
								<view class="hu-pic">
									<img class="hu-lazy-timeout-click" :src="item.image" />
								</view>
								<view class="hu-text">
									<view class="hu-text">
										<view class="hu-name">
											<view class="hu-lb-area"></view>
											<h4>{{item.name}}</h4>
										</view>
				
										<view class="hu-area">
											建面：<span class="hu-num-area">{{item.area}}</span>
										</view>
				
										<view class="hu-total-price">
											参考总价：<span class="hu-price-num">{{item.total}}</span>
										</view>
				
										<view class="hu-h-lb-area">
											<span v-for="(item2, index2) in item.cate_type_arr" :key="index2">{{item2}}</span>
										 
										</view>
				
									</view>
								</view>
							</view> 
						</view> 
							
							
						<ul class="link-area" style="padding: 0;background: #fff;text-align: center;" >
						    <li class="left" @click="open({
								type:'trueTime',
								msg:'领取户型图',
								title:'领取户型图',
								text:'稍后将会把全部户型图资料发送给您'
							})">
								<span >领取户型图</span>
						    </li>
							
							
						
						    <li class="right" @click="open({
								type:'trueTime',
								msg:'咨询房贷首付',
								title:'咨询房贷首付',
								text:'专业咨询师，为您深度解答'
							})">
						        
						        <span >咨询首付和资质</span>
						    </li>
						</ul>
					</view>
			    
			        <!-- 留电 版本3.10 降低跳出率 -->
			        <view class="tel-bg-bn">
			            <view class="bg-wrap">
			                <view class="julive_m_four_zero_zero" >
			                    <view class="bn-box-r">
			                        <img src="@/static/img00/bn.png" />
			                    </view>
			                </view>
			
			                <view class="bn-box-l" @click="goPhone()">
			                    <!-- <img class="lazy" src="@/static/img00/dh.png" /> -->
			                </view>
			
			                <view class="bn-box-c" @click="goPhone()">
			                    <p class="tel-num">400-831-0818</p>
			                    <p class="hot-line">拨打热线，免费提供专属楼盘分析</p>
			                </view>
			                
			            </view>
			        </view>
			    </view>
			</view>
		
		</view>

		<!-- 楼盘动态 -->
		<view v-if="building_num>0" class="row">
			<view class="hd"  @click="dongtai()">
				<h2 class="consult-haed">楼盘动态({{building_num}})</h2>
				<p class="know">查看全部></p>
        	</view>

			<ldongtai :jdata="building"></ldongtai>
			
			<view style="margin-left: 40rpx;" class="link-area" @click="open({
								type:'trueTime',
								msg:'获取实时动态',
								title:'获取实时动态',
								text:'怕错过开盘时间、限时折扣、特价房消息？有新动态咨询师将第一时间通知您！'
							})">
			    <img src="@/static/img00/sub.png">
			    <span>获取实时动态</span>
			</view>
		</view>

		<!-- 周边配套 -->
		<view>
			<wicketmap></wicketmap>
		</view>
		
		<view v-if="info.content" class="row">
		  <view class="huxing-mod mod-house-type">
		        <view class="hd" style="margin-left:0;">
		            <h2>楼盘亮点</h2>
		        </view>
				<view>					
					<jshopContent :content="info.content" :is_all_show="is_all_show" v-if="info.content"></jshopContent>
				</view>
				<view  class="link-area" @click="open({
								type:'liangdian',
								msg:'查看楼盘亮点',
								title:'查看楼盘亮点',
								text:'留下电话号码，查看完整楼盘亮点！'
							})">
				    <img src="@/static/img00/sub.png">
				    <span>查看完整楼盘亮点</span>
				</view>
		    </view>
		</view>

		<!-- 传媒 -->
		<!-- <view>
			<cqcm :jdata="news_one" :newsCount="newsCount" ></cqcm>
		</view> -->
		
		

		<!-- 问答 -->
		<view v-if="loupan_ask_num > 0" class="row">
			<view class="hd">
				<h2>买房问答({{loupan_ask_num}})</h2>
			</view>

			<xwenda :jdata="loupan_ask"></xwenda>

		</view>

		<!-- 看过楼盘 -->
		<view class="row">
			<view class="hd">
				<h2 class="consult-haed">看过该楼盘的人</h2>
				<p class="know">查看全部></p>
        	</view>

			<recommend :jdata="lou_rand"></recommend>

		</view>

		<view>
			<statement></statement>
		</view>

		<view class="fx">
			<view class="bottom">
			
			    <view class="phone" @click="goPhone()">
			        <img src="@/static/img00/magni3.png" alt="">
			        <p>热线咨询</p>
			    </view>
			    
			   
			    <view class="person ">
			        <img src="@/static/img00/fenx.png" alt="">
			        <p >分享</p>
			    </view>
			
			    <view class="dian" @click="goToSeek()" >帮你找房</view>
			    <view class="liu" @click="open({
								type:'counselor',
								msg:'我要咨询',
								title:'我要咨询',
								text:'有哪些优劣势？性价比如何？还有什么类似楼盘推荐...... 更多问题，房象咨询师帮您答疑解惑'
							})">我要咨询</view>
			</view>
		</view>


		
		<uni-popup ref="popup" type="center">
		    <view class="pop-content">
		        <view  class="pop-bohu">
		            <view @click="close()" class="pop-shut"></view>
		
		            <view class="pop-title">{{pop_title}}</view>
		
		            <p class="pop-text">{{pop_text}}</p>
		
		            <view class="pop-phone">
		                <input @input="onKeyInput2" :value="mobile" type="text" placeholder="请输入订阅手机号">
		            </view>
		
		            <button class="pop-btn-area"  @click="expert">确定</button>
		        </view> 
		    </view>   
		</uni-popup> 
		
		<uni-popup ref="message" type="center">
		    <view class="pop-expert2-popup">
		        <p class="pop-expert2-popup-p">请输入正确格式的手机号</p>
		        <p @click="close1()" class="pop-expert2-popup-shut">取消</p>
		    </view>
		</uni-popup>
		
		
	</view>
</template>

<script>
	import Wicketmap from 'pages/index/details/Wicketmap';
	import Xwenda from 'pages/index/details/Xwenda';
	// import recommend from 'pages/index/recommend'
	import recommend from "../recommend";
	import Statement from 'pages/index/details/Statement';
	import Ldongtai from 'pages/index/details/Ldongtai';

	// import popOne from 'components/pop-up/pop-one';
	import jshopContent from '@/components/jshop/jshop-content.vue' //视频和文本解析组件
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	
	export default {
		components: {	
			Wicketmap,
			Xwenda,
			recommend,
			Statement,
			Ldongtai,
			
			// popOne,
			uniPopup,
			uniPopupMessage,
			uniPopupDialog,
			jshopContent
		},
		data() {
			return {
				swiper: {
					indicatorDots: true,
					autoplay: true,
					interval: 3000,
					duration: 800,
				}, // 轮播图属性设置
				span: [
				    { list: "幼儿园" },
				    { list: "紧凑实用" },
				],
				loupan_id:0,
				loupanPhoto:[],
				info:[],
				youhui:[],
				huxing:[],
				all_huxing_num:0,
				building:[],
				building_num:0,
				news_one:[],
				newsCount:0,
				loupan_ask:[],
				loupan_ask_num:0,
				lou_rand:[],
				//弹窗
				pop_title:'',
				pop_text:'',
				param:{},
				mobile:'',
				
				is_all_show:0,//富文本是否全部显示1=是，0=否
				
			}
		},
		onLoad: function(e) {
			this.loupan_id = e.loupan_id;
			// console.log(this.loupan_id );
			let _this = this;
			this.$api.getPageLoupanDetail({
					loupan_id:_this.loupan_id,
				},
				res => {
					_this.info = res.data.info;
					_this.loupanPhoto = res.data.loupanPhoto;
					_this.youhui = res.data.youhui;
					_this.huxing = res.data.huxing_three;
					_this.all_huxing_num = res.data.all_huxing_num;
					_this.building = res.data.building;
					_this.building_num = res.data.building_num;
					
					_this.news_one = res.data.news_one;
					_this.newsCount = res.data.newsCount;
					
					_this.loupan_ask = res.data.loupan_ask;
					_this.loupan_ask_num = res.data.loupan_ask_num;
					
					_this.lou_rand = res.data.lou_rand;
					// console.log(res);
				}
			);
			
		},
		
		methods:{
			details(loupan_id){
				// 跳转详情
				this.$common.navigateTo("../xqtab/Xqtab?loupan_id="+loupan_id);
			},
			dongtai(){
				// 跳转楼盘动态
				this.$common.navigateTo("../condition/Condition");
			},
			fiery(){
				// 跳转火热榜
				this.$common.navigateTo("../fiery/Fiery");
			},
			goToSeek(){
				// 跳转帮你找房
				this.$common.navigateTo("../seek/Seek");
			},
			unit(loupan_id){
			    this.$common.navigateTo("../Unit/Unit?loupan_id="+loupan_id);
			},
			hux(huxing_id,loupan_id){
				this.$common.navigateTo("../type/Type?loupan_id="+loupan_id+'&huxing_id='+huxing_id);
			},
			goPhone(){
				uni.makePhoneCall({
				    phoneNumber: '400-831-0818' //仅为示例
				});
			},
			open(data){
				// console.log(data);
				this.pop_title = data.title;
				this.pop_text = data.text;
				this.param ={
					'type': data.type,
					'msg': data.msg,
					'loupan_id': this.loupan_id
				};
			    this.$refs.popup.open();
			},
			close(){
			     this.$refs.popup.close()
			},
			expert(){
				//提交
				let _this = this;
				let mobile = this.mobile;
				if(mobile == ''){
					uni.showToast({
					    title: '手机号码不能为空',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				
				var myreg = /^[1][3,4,5,7,8,9][0-9]{9}$/;
				if (!myreg.test(mobile)) {
					uni.showToast({
					    title: '请输入正确的手机号',
					    duration: 2000,
						icon:'none'
					});
					return false;
				}
				this.param.mobile = mobile;
				this.param.loupan_res = this.info;
				this.$api.pushAjaxSubmit({
						param:_this.param
					},
					res => {
						if(_this.param.type == 'liangdian'){
							_this.is_all_show = 1;
						}
						_this.$refs.popup.close()
					}
				);
				
				
			    // this.$refs.message.open()
			},
			close1(){
			    this.$refs.message.close()
			},
			
			onKeyInput2: function(event) {
				this.mobile = event.target.value
			},
		}
	}
</script>

<style scoped>

/* .carousel-box{
    height: 18rem;
    background: olivedrab;
}
.carousel-box>img{
    height: 18rem;
    width:100%;
} */
/* 头部 */

.row {
	/* height: 35.5rem; */
	background: #fff;
	margin-top: 20upx;
	padding-bottom: 60upx;
}


.hd {
  	height: 100upx;
  	margin-left: 40upx;
	padding-top: 40upx;
	margin-bottom: 40upx;
}
*{
	padding: 0;
	margin:  0;
}
li, ol, ul {
    list-style: none
}
h2 {
	float: left;
	font-size: 44rpx;
	color: #3e4a59;
}
.know {
	float: right;
	color: #a8adb4;
	margin-right: 40rpx;
	line-height: 56rpx;
}
/* 问答 */

.fx{
	position: fixed;
	background: #fff;
	bottom: 0;
	height: 114rpx;
}


	
	
	
	.swiper {
		height:360rpx;
	}
	.swiper-c {
		height: 100%;
	}
	
	.swiper-c img {
		height: 100%;
		width: 100%;
	}
	.swiper-list .img-grids-item {
		height: 350rpx !important;
	}
	
	.swiper-grids .swiper-list {
		white-space: nowrap;
		width: 100%;
		min-height: 200upx;
	}
	
	.swiper-grids .img-grids-item {
		float: none;
		margin-right: 0;
		width: 255upx;
		margin-top: 0;
	}
	
	.swiper-grids .img-grids-item:last-child {
		margin-right: 26upx;
	}
	
	.swiper-grids .img-grids-item-t {
		width: 255upx;
		height: 255upx;
	}
	
	.swiper-grids .goods-name {
		white-space: normal;
	}
	
	
	
	
	

	.row2{
	    height: 900rpx;
	    background: #fff;
	
	}
	
	.mod{
	    /* margin: 0 2rem; */
	}
	.mod-tit{
	    /* height: 7rem; */
	    padding: 30rpx 0 0 ;
	}
	.bd{
	    /* height: 5.4rem; */
	    margin: 0 40rpx;   
	}
	
	
	.name{
	    height: 60rpx;
	    width:  560rpx;
	}
	h3{
	    font-size: 44rpx;
	    float: left;
	}
	.tag-aqg>img{
	    width: 96rpx;
	    height:36rpx;
	    float: left;
	    margin-top: 14rpx;
	    margin-left: 20rpx;
	}
	.lb-area{
	    /* height: 2.2rem; */
	    width: 600rpx;
	    margin-top: 15rpx;
	    
	}
	.new-lbs{
	    margin-right: 20rpx;
	    padding: 4rpx 6rpx;
	}
	.new-lbs-yt{
	    border: 1px solid #13c3c3;
	    color:#13c3c3;
	     border-radius: 6rpx;
	}
	.new-lbs-in{
	    background: #f3f6f9;
	    color: #13c3c3;
	   
	}
	.price-current{
	    height: 48rpx;
	    line-height: 48rpx;
	    margin-top: 20rpx;
	}
	.base-info>li{
	     color: #77808a;
	     margin-top: 20rpx;
	}
	
	 .base-info>li>span{
	     color: #3e4a59;
	 }
	
	.price-wrap>span{
	     color: #ff5c47;
	     font-size: 38rpx;
	     font-weight: 550;
	}
	.price-history>span{
	    color: #3e4a59;
	    font-size: 32rpx;
	    font-weight: 550;
	}
	.th{
	    float: left;
	}
	.td{
	    color: #3e4a59;
	    display: -webkit-box;    
	    -webkit-box-orient: vertical;    
	    -webkit-line-clamp: 2;    
	    overflow: hidden;
	}
	.td>span{
	    margin-right: 20rpx;
	}
	
	.link-more{
	    margin-top: 60rpx;
	    text-align: center;
	    color: #13c3c3;
	}
	.ranking-entrance{
	    height: 92rpx;
	    margin-top:40rpx;
	    border-top:1px solid #F2F2F2;
	    border-bottom: 1px solid #F2F2F2 ;
	    line-height: 92rpx;
	}
	.pic>img{
	    height: 40rpx;
	    width: 40rpx;
	    margin-right: 20rpx;
	    margin-top: 26rpx;
	}
	.pic{
	    float: left;
	   
	}
	.pic>p{
	    float: left;
	}
	.right{
	    float: right;
	}
	.right>img{
	    height: 40rpx;
	    width: 40rpx;
	    margin-top: 26rpx;
	}
	
	.link-area{
	    height: 90rpx;
	    margin-top: 40rpx;
	}
	.link-area>li{
	    height: 100%;
	    width: 300rpx;
	    float: left;
	
	    background: #f3f6f9;
	    /* text-align: center; */
	    line-height: 90rpx;
	    font-size: 28rpx;
	    font-weight: 550;
	    color: #13c3c3;
	    border-radius: 10rpx;
	}
	 .link-area>li>img{
	     height: 40rpx;
	     width: 40rpx;
	     float: left;
	     margin-top: 26rpx;
	     margin-left: 30rpx;
	 }
	 .link-area>li>span{
	     margin-left: 10rpx;
	 }
	.right{
	    margin-left: 60rpx;
	}
	
	
	
	
	.pop-shut{
	    height: 32upx;
	    width: 32upx;
	    position: relative;
	    top:-30upx;
	    left: 98%;
	    background: url("../../../static/img00/shut.png") no-repeat;
	    background-size: 100% 100%;
	}
	
	.pop-content{
	    margin-left: 8%;
	    margin-right: 8%;
	    background: #fff;
	    border-radius: 10upx;
	    display: flex;
		width:84%;
	}
	.pop-bohu{
	    padding: 50upx 60upx 50upx 60upx;
	    margin: 0 auto;
	    align-self: center;
		
	}
	
	.pop-title{
	    font-size: 40upx;
	    font-weight: 550;
	    color: #3e4a59;
	    text-align: center;
	}
	.pop-text{
	    margin:30upx 0 50upx 0;
	    text-align: center;
		color: #000000;
		line-height: 60rpx;
		font-weight: 500;
	}
	.pop-phone{
	    border: 1upx solid #cdd7e1;
	    border-radius: 10upx;
	}
	.pop-phone>input{
	    padding: 0 30upx;
		color: #000000;
		font-weight: 500;
		border:1px solid #CCCCCC;
	}
	input{
	    height: 86upx;
	}
	.pop-btn-area{
	    margin-top: 30upx;
	    background: #13c3c3;
	    color: #fff;
	}
	
	.pop-expert2-popup{
	    width: 510upx;
	    height: 240upx;
	    background: #fff;
	    border-radius: 10upx;
	}
	.pop-expert2-popup-p{
	    height: 150upx;
	    text-align: center;
	    font-size: 28uxp;
	    color: #3e4a59;
	    line-height: 150upx;
	    border-bottom: 1upx solid rgb(195, 195, 195);
	}
	.pop-expert2-popup-shut{
	    text-align: center;
	    line-height: 90upx;
	    color: #47b3e3;
	}
	
	
	
	.link-area{
	    width: 670rpx;
	    height: 90rpx;
	    background-color: #f3f6f9;
	    /* background: #13c3c3; */
	    border-radius: 6rpx;
	    padding-left: 220rpx;
		
	}
	.link-area>img{
	    height: 36rpx;
	    width: 36rpxm;
	    margin-top: 26rpx;
	    float: left;
	}
	.link-area>span{
	   line-height: 90rpx;
	   color:#13c3c3;
	   font-size: 28rpx;
	   font-weight: 550;
	   margin-left: 20rpx;
	}
	
	
	.bottom{
	    display: flex;
	}
	
	.person,.phone{
	    width: 120rpx;
	    font-size: 24rpx;
	    color: #3e4a59;
	}
	.phone{
	    border-right: 1px solid #999;
	    margin-top: 14rpx;
	    margin-left: 40rpx;
	}
	.phone>img{
	    height: 36rpx;
	    width: 36rpx;   
	    margin-left: 38rpx;
	}
	.phone>p{
	    text-align: center;
	} 
	.person>img{
	    height: 36rpx;
	    width: 36rpx;
	    margin-top: 14rpx;
	    margin-left: 38rpx;
	}
	.person>p{
	    text-align: center;
	}
	
	.dian,.liu{
	    margin-top: 20rpx;
	    width: 192rpx;
	    height: 72rpx;
	    line-height: 72rpx;
	    text-align: center;
	    color: #fff;
	    font-size: 30rpx;
	    margin-left: 20rpx;
	    border-radius: 6rpx;
	}
	.dian{
	    background: #13c3c3;
	}
	.liu{    
	    background: #fa5f35;   
	}
	
	
	
	
	
	
	
	
	
	
	
	.click_open_layer{
		height: 186rpx;
		position: relative;
		/* background: url("../../../static/img00/yhj.png") no-repeat;
		background-size: 33.4rem 9rem; */
		color: #fff;
		margin-bottom: 20rpx;
	}
	
	.click_open_layer image{
		width:668rpx;
		height:186rpx;
	}
	
	.back{
		height: 186rpx;
		/* background: url("../../../static/img00/yhj1.png") no-repeat; */
		background-size: 668rpx 180rpx;
		margin-top: 40rpx;
	}
	.discount-area{
		position: relative;
	}
	.btn-know{
		position: absolute;
		top:30rpx;
		right:82rpx;
		z-index: 20;
		/* margin-left: 40rpx;
		z-index: 20; */
	}
	.name{
		font-size: 44rpx;
		margin: 20rpx 44rpx 0 0;
		font-weight: 550;
	}
	.txt{
		font-size: 36rpx;
	}
	.txt2{
		font-size: 24rpx;
	}
	
	.wrapper-right{
		/* float: left; */
		font-size: 24rpx;
		/* margin-left: 490rpx;
		margin-top: -120rpx; */
	}
	
	
	
	
	
	
	
	
	
	
	
	
	
	
	.huxing-mod{
	    padding-top: 40rpx;
	    margin-left: 40rpx;
		margin-right: 40rpx;
	}
	
	
	
	.more{
	    float: right;
	    color: #a9bacf;
	    margin-top: 14rpx;
	}
	
	.more>img{
	    height: 30rpx;
	    width: 30rpx;
	    float: right;
	    margin-top: 6rpx;
	    margin-right: 40rpx;
	}
	
	.tel-bg-bn{
		margin-top: 50rpx;
	    height: 188rpx;
	    /* background: red; */
	}
	.bg-wrap{
	    height: 150rpx;
	    width:670rpx;
	    background: #d7f5ff;
	}
	.bn-box-r{
	    height: 150rpx;
	    width: 120rpx;
	    float: left;
	}
	.bn-box-r>img{
	    height: 100%;
	    width: 100%;
	}
	.bn-box-l{
	    height: 106rpx;
	    width: 106rpx;
	    float:right;
	    margin-top: 20rpx;
	    margin-right: 20rpx;
	}
	.bn-box-l>img{
	    height: 100%;
	    width: 100%;
	}
	
	.bn-box-c{
	    height: 120rpx;
	    width: 406rpx;
	    float: left;
	    text-align: center;
	    margin-top: 24rpx;
	}
	.tel-num{
	    height: 64rpx;
	    width: 406rpx;
	    font-size: 44rpx;
	    color: #13c3c3;
	    line-height: 64rpx;
	}
	.hot-line{
	    height: 33rpx;
	    font-size: 24rpx;
	    color: #13c3c3;
	}
	
	
	
	
	.hu-house-type-list{
	    height: 168rpx;
	    margin-top: 20rpx;
	}
	
	.hu-pic{
	    height: 168;
	    width: 224rpx;
	    float: left;
	}
	.hu-pic>img{
	    height: 168rpx;
	    width: 224rpx;
	}
	
	.hu-text{
	    float: left;
	    margin-left: 40rpx;
	}
	
	.hu-area,.hu-total-price,.hu-h-lb-area{
	    font-size: 24rpx;
	    color: #77808a;
	    margin-top: 8rpx;
	     width: 360rpx;
	}
	.hu-price-num{
	    color: #fa5f35;
	    font-weight: 700;
	    font-size: 28rpx;
	}
	
	.hu-h-lb-area>span{
	    height: 36rpx;
	    padding: 0 8rpx;
	    border:1px solid #77808a;
	    border-radius: 4rpx;
	    margin-right: 20rpx;
	}
	
	
</style>
